<template>
  <div class="mask">
    <div
      class="scale-wrapper"
      ref="scaleWrapper"
      :style="{
        width: `${baseWidth}px`,
        height: `${baseHeight}px`,
        transform: 'scale(' + scale + ') translate(-50%, -50%)',
      }"
    >
      <!-- 头部区域 -->
      <header v-if="$slots.header" class="header">
        <slot name="header" />
      </header>

      <!-- 主内容区 -->
      <main class="main-content">
        <slot />
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { debounce } from "lodash-es";
const props = defineProps({
  baseWidth: {
    type: Number,
    default: 1920,
  },
  baseHeight: {
    type: Number,
    default: 1080,
  },
});

const scaleWrapper = ref(null);
const scale = ref(0.9);
function getScale() {
  const ww = window.innerWidth / props.baseWidth;
  const wh = window.innerHeight / props.baseHeight;
  return ww < wh ? ww : wh;
}
const setScale = debounce(() => {
  const s = getScale();
  scale.value = s;
}, 200);

onMounted(() => {
  setTimeout(setScale, 200); // 确保DOM渲染完成
  window.addEventListener("resize", setScale);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", setScale);
});
</script>

<style scoped>
.mask {
  width: 100%;
  height: 100%;
  position: relative;
}
.scale-wrapper {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  /* overflow-y: auto; */
  /* 这里还要处理 */
  overflow: hidden;  
  display: flex; 
  flex-direction: column;
  background: url("@/assets/main.png") no-repeat center center;
}

.header {
  position: relative;
  height: 80px;
  background: url("@/assets/header.png") no-repeat center center;
}

.main-content {
  /* 改用百分比高度 */
  height: calc(100% - 80px);
  flex: 1;
  min-height: 0; /* 修复Flex布局溢出问题 */
}
</style>
